<!--
- @fileName: login
- @author: LG
- @date: 2020/11/27 12:40
- @description：login
- @update: 2020/11/27 12:40
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <!--    引入网站图标   -->
    <link rel="icon" href="../images/favicon.ico" />
    <!--    重置默认样式   -->
    <link rel="stylesheet" href="../css/reset.css" />
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../css/common.css" />
    <!--   login的css   -->
    <link rel="stylesheet" href="../css/login/login.css" />

    <script src="../js/iconfont.js"></script>
  </head>
  <body>
    <!-- 头部logo -->
    <header class="header">
      <div class="container">
        <div class="logo">
          <h1>
            <a href="index.html" title="腾讯课堂">腾讯课堂</a>
          </h1>
        </div>
      </div>
    </header>
    <!-- 头部logo区域结束 -->

    <!-- 登录框 -->
    <section class="login_panel">
      <div class="form_info">
        <h2>用户登录</h2>
        <p style="position: relative">
          用户：
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-mine"></use>
          </svg>
          <!-- 学号-->
          <input
            name="username"
            type="text"
            class="login-text"
            placeholder="用户名"
          />
        </p>
        <p style="position: relative">
          密码：
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-mima"></use>
          </svg>
          <!-- 密码-->
          <input
            name="password"
            type="password"
            class="login-password"
            placeholder="密码"
          />
        </p>

        <p>
          <!-- 登录按钮-->
          <button class="login-btn">登录</button>
        </p>
        <p class="rempass">
          <span>
            <a href="userAction.html" class="login-a">忘记密码？</a>
          </span>
          <span>
            <a href="userAction.html" class="login-a">立即注册</a>
          </span>
        </p>

        <hr style="margin-top: 1.5vw" />
        <p class="login-bom">
          <a href="index.html">
            <span> 首页</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </a>
        </p>
      </div>
    </section>
    <!-- 登录框结束 -->
    <script>
      //去浏览器对象中取用户信息
      var user = JSON.parse(localStorage.getItem("user"));
      //用户名
      var userName = document.querySelector(".login-text");
      //密码框
      var pw = document.querySelector(".login-password");

      var loginbtn = document.querySelector(".login-btn");
      loginbtn.onclick = function () {
        if ( userName.value.trim() == user.username) {
          if (pw.value.trim() == user.password) {
            alert("登录成功");
            window.location.href =
              "./index.html?username=" +
              userName.value.trim() +
              "&password=" +
              pw.value;
          } else {
            alert("密码错误");
          }
        } else {
          alert("暂无用户，请先注册!");
        }
      };
    </script>
  </body>
</html>
